<template>
  <div>
    <h2>ref</h2>
    <p>name: <input type="text" v-model="name"/> {{ name }}</p>
    <p>age: <input type="text" @input="handleInputAge($event.target?.value)"/> {{ age }}</p>
    <p>school: <input type="text" @input="school = $event.target.value" :value="school"/> {{ school }}</p>
  </div>
</template>
  
  <script lang="ts">

import {ref} from "vue";

export default {
  setup() {
    const name = ref("Hydra");
    const age = ref("35");
    const school = ref("21中")

    // ref用于包装一个基础数据类型（也可以包装引用类型），返回一个响应式对象
    // ref返回的响应式对象，要读取/修改它的值时，使用.value；但是在模板中安装普通变量使用即可（语法糖）。
    function handleInputAge(value:string) {
        age.value = value;
    }

    return {
      name,
      age,
      school,
      handleInputAge
    };
  },
};
</script>
  
  <style scoped>
</style>